<div class="middletopMenu clearfix">
    <div class="row justify-content-end">
        <div class="input-group mb-3">
            <label class="input-group-text" for="username">{lang username}</label>
            <input type="text" class="form-control" id="username" placeholder="{lang username}">
            <label class="input-group-text" for="operation">{lang operation}</label>
            <select name="field_type" id="operation" class="form-select">
                <option value="" selected="selected">{lang all}</option>
                <!--{loop $operation_type $value}-->
                <option value="$value[0]">$value[1]</option>
                <!--{/loop}-->
            </select>
            <label class="input-group-text" for="object">{lang object}</label>
            <input type="text" class="form-control" id="object" placeholder="{lang object}">
        </div>
        <div class="col-sm-4 mb-3">
            <select class="form-control" id="dynamic_id_label_multiple" multiple="multiple">
                {loop $users $v}
                <option value="$v['uid']">$v['username']</option>
                {/loop}
            </select>
        </div>
        <div class="col-sm-6 mb-3">
            <div class="input-daterange input-group" id="datepicker">
                <label class="input-group-text" for="selectDate">从</label>
                <input type="text" class="form-control selectDate" id="selectDate" placeholder="{lang create_time}">
                <label class="input-group-text" for="selectDate1">至</label>
                <input type="text" class="form-control selectDate" id="selectDate1" placeholder="{lang create_time}">
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <button type="submit" class="btn btn-primary me-1" id="search-btn">搜索</button>
            <button type="reset" class="btn btn-default" id="refreshsearch">重置</button>
        </div>
    </div>
</div>
<table class="layui-hide" id="table" lay-filter="table"></table>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button type="button"  class="layui-btn layui-btn-normal layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="get">刷新</button>
    </div>
</script>
<script type="text/html" id="search_do">
    <a href="javascript:;" lay-event="search_do">{{d.do_lang}}</a>
</script>
<script type="text/html" id="search_obj">
    <a href="javascript:;" lay-event="search_obj">{{d.do_obj}}</a>
</script>
<script>
    var search_data = {
        'doobj': '',
        'doevent': '',
        'uids': '',
        'startdate': '',
        'enddate': '',
        'username':'',
        'sort':'dateline',
		'order':'desc'
    };
    $('.input-daterange').datepicker({
        autoclose:true,
        todayHighlight:true,
        clearBtn:true,
        language: 'zh_CN',
        todayBtn: "linked",
		calendarWeeks: true,
        zIndexOffset: 120
    });
	jQuery(document).ready(function(e) {
	  layui.table.render({
		elem: '#table',
		url: '{MOD_URL}&op=dynamic&do=filelist',
		toolbar: '#toolbar',
		title: '动态数据表格',
		autoSort: false,
        even:true,
        cellMinWidth:120,
        height: function(){
            var otherHeight = $('.middleconMenu').outerHeight();
            var middletopMenu = $('.middletopMenu').outerHeight();
            return otherHeight-middletopMenu;
        },
		text: {
			none: '<div class="emptyPage"><img src="static/image/common/no_list.png"><p class="emptyPage-text">{lang no_dynamisc}</p></div>'
		},
		page: {
		  limit: 50, // 默认显示20行
		  limits: [10, 20, 50, 100, 200, 500, 1000,2000,5000] // 可选的行数
		}
		,cols: [[
            {type:'checkbox', fixed: 'left'}
            ,{title: 'ID',width:80, fixed: 'left',type: 'numbers'}
            ,{field:'dateline', title: '{lang time}', sort: true, align: 'center'}
            ,{field:'username', title: '{lang username}', align: 'center', sort: true,templet: function(d) {return d.username;}}
		  ,{field:'do', title: '{lang operation}', align: 'center', sort: true, templet: '#search_do'}
		  ,{field:'do_obj', title: '{lang object}', align: 'center', sort: true, templet: '#search_obj'}
		  ,{field:'body_data', title: '{lang details}', align: 'left',sort: true,templet: function(d) {return d.body_data;}}
		]],
		initSort: {
			field: 'dateline', // 默认排序字段
			type: 'desc' // 默认排序方式
		}
	  });
	  //头工具栏事件
	layui.table.on('toolbar(table)', function(obj){
		var checkStatus = layui.table.checkStatus(obj.config.id); //获取选中行状态
		var data = checkStatus.dataCache;
		switch(obj.event){
            case 'getCheckData':
                if (data.length === 0) {
                    showmessage("请至少选择一行", 'danger', 3000, 1);
                    return;
                }
                var template = '<div class="accordion">';
                    data.forEach(function(item) {
                        template += '<div class="accordion-item">';
                        template += '<h2 class="accordion-header" id="Open-heading' + item.LAY_NUM + '">';
                        template += '<button class="accordion-button" type="button" data-toggle="collapse" data-target="#Open-collapse' + item.LAY_NUM + '" aria-expanded="true" aria-controls="Open-collapse' + item.LAY_NUM + '">';
                        template += 'ID：' + item.LAY_NUM;
                        template += '</button>';
                        template += '</h2>';
                        template += '<div id="Open-collapse' + item.LAY_NUM + '" class="accordion-collapse collapse show" aria-labelledby="Open-heading' + item.LAY_NUM + '">';
                        template += '<div class="accordion-body">';
                        template += '<p><strong>{lang time}:</strong> ' + item.dateline + '</p>';
                        template += '<p><strong>{lang username}:</strong> ' + item.username + '</p>';
                        template += '<p><strong>{lang operation}:</strong> ' + item.do_lang + '</p>';
                        template += '<p><strong>{lang object}:</strong> ' + item.do_obj + '</p>';
                    if (item.body_data) {
                        template += '<p><strong>{lang details}:</strong> ' + item.body_data + '</p>';
                    }
                    template += '</div>';
                    template += '</div>';
                    template += '</div>';
                });
                template += '</div>';
                layer.alert(template, {
                    title: '选中的记录'
                });
            break;
            case 'get':
            layui.table.reloadData('table', {
                where: search_data, // 清空搜索参数
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            break; 
        };
    });
    //监听工具条
	  layui.table.on('tool(table)', function(obj){
		var data = obj.dataCache;
		if(obj.event === 'search_do'){
            $('#operation').val(data.do).trigger('change');
            return false;
		} else if(obj.event === 'search_obj'){
			var doval = data.do_obj;
            search_data.doobj = doval;
            $('#object').val(doval);
            layui.table.reloadData('table', {
            where: search_data,
            page: {
                curr: 1
            }
            });
		}
	  });
    //触发排序事件 
	layui.table.on('sort(table)', function(obj){
        search_data.sort = obj.field;
		search_data.order = obj.type;
		layui.table.reloadData('table', {
			initSort: obj,
            where: search_data
		});
	});
	  layui.table.on('rowDouble(table)', function(obj){
		showDataTemplate(obj);
	  });
      $("#dynamic_id_label_multiple").select2({
        placeholder: '{lang screening_of_operators}',
		separator: ",",
		multiple:true,
		ajax: {
            url: MOD_URL+'&op=search_condition&do=getuser',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term,
                    page: params.page || 1
                };
            },
            processResults: function(data, page) {
                var more = (page * 30) < data.total_count;
                return {
                    results: data.items,
                    pagination: {
                        more: more
                    }
                };
            }
        }
        }).on('change', function () {
            search_data.uids = $(this).val();
            executedynamisc_search();
        });
        // 搜索按钮功能
		$(document).on('click', '#search-btn', function() {
            search_data.doobj = $('#object').val();
            search_data.username = $('#username').val();
            executedynamisc_search();
        });
        $('#refreshsearch').click(function() {
            $('#operation').val('');
            $('#object').val('');
		    $('#username').val('');
            for (var o in search_data) {
                search_data[o] = '';
            }
            executedynamisc_search();
        });
        $('#operation').on('change', function () {
            search_data.doevent = $(this).val();
            executedynamisc_search();
        });
        $('#selectDate').change(function () {
            search_data.startdate = $('#selectDate').val();
            search_data.enddate = $('#selectDate1').val();
            if (search_data.startdate && search_data.enddate) {
                var start = new Date(search_data.startdate);
                var end = new Date(search_data.enddate);
                if (start.getTime() > end.getTime()) {
                    layer.alert('{lang select_correct_time_interval}', {skin:'lyear-skin-danger'});
                    return false;
                }
            }
            search_data.page = 0;
            executedynamisc_search();
        })
        $('#selectDate1').change(function () {
            search_data.startdate = $('#selectDate').val();
            search_data.enddate = $('#selectDate1').val();
            if (search_data.startdate && search_data.enddate) {
                var start = new Date(search_data.startdate);
                var end = new Date(search_data.enddate);
                if (start.getTime() > end.getTime()) {
                    layer.alert('{lang select_correct_time_interval}', {skin:'lyear-skin-danger'});
                    return false;
                }
            }
            search_data.page = 0;
            executedynamisc_search();
        });
      function executedynamisc_search() {
        layui.table.reloadData('table', {
            initSort: {
                field: search_data.sort,
                type: search_data.order
            },
		  where: search_data,
		  page: {
			curr: 1
		  }
		});
        jQuery('.scroll-y').scrollTop(0);
    }
		function showDataTemplate(obj) {
			var data = obj.dataCache;
			var template =
			'<p><strong>{lang time}:</strong> ' + data.dateline + '</p>' +
			'<p><strong>{lang username}:</strong> ' + data.username + '</p>' + 
			'<p><strong>{lang operation}:</strong> ' + data.do_lang + '</p>' +
			'<p><strong>{lang object}:</strong> ' + data.do_obj + '</p>' +
			(data.body_data ? '<p><strong>{lang details}:</strong> '+data.body_data+'</p>' : '');
			layer.alert(template, {
				title: 'ID <strong>' + data.LAY_NUM + '</strong> 详情：'
			});
	
		// 标注选中样式
		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		}
	});
</script>